<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹窗示例</title>
	</head>
	<style>
		.button{
			text-decoration: none;
			display: flex;
			border: none;
			background-color: #2d8cf0;
			color: aliceblue;
			justify-content: center; /* 水平居中 */
			align-items: center; /* 垂直居中 */
			padding: 8px;
			border-radius: 6px;
			width: 200px;
			margin: 10px;
		}
		.button:hover{
			background-color: rgb(102, 177, 255);
		}
		
		
		.popup{
			min-width: 80%;
			min-height: 40%;
			position: absolute;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /**添加一个阴影效果，颜色为黑色透明度为0.2的阴影**/
			border-radius: 4px;
			background-color: white;
			top:50%;
			left:50%;
			transform: translate(-50%, -50%);
			display: none;
		}
		
		.popup::before{
			content: "x";
			display: block;
			position:absolute;
			right: 10px;
			width: 20px;
			font-size: 20px;
			
		}
		
		
		.drawer{
			display: none;
			width: 40%;
			height: 100%;
			position: absolute;
			background-color: white;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /**添加一个阴影效果，颜色为黑色透明度为0.2的阴影**/
			top: 0;
			right: 0;
			z-index: 999;
		}
		
		
		/**
		 * 向左
		 */
		.sliderleft{
			animation: slideOutLeft .5s forwards; /* 应用名为slideOutLeft的动画，持续时间为1秒，并保持最后一帧的状态 */
			transform-origin: top right; /* 设置动画的原点为盒子的右上角 */
		}
		
		/**
		 * 向左弹出动画
		 */
		@keyframes slideOutLeft {
		  0% {
			transform: scaleX(0); /* 初始水平缩放为0 */
		  }
		  100% {
		    transform: scaleX(1); /* 最终水平缩放为1，实现向左展开 */
		  }
		}
	</style>
	<body>
		<a class="button" id="openpopup">打开弹窗</a>
		<a class="button" id="opendrawer">打开抽屉</a>
		<div class="popup" id="popup">
			<a>这是弹窗内容</a>
		</div>
		<div class="drawer" id="drawer">
			<a class="button" id="openpopup1">打开弹窗</a>
		</div>
		<script>
			let popup=document.getElementById('popup');
			document.getElementById('openpopup').addEventListener('click',(event)=>{
				popup.style.display="block";
			})
			
			let drawer=document.getElementById('drawer');
			document.getElementById('opendrawer').addEventListener('click',(event)=>{
				drawer.classList.add('sliderleft')
				drawer.style.display="block";
			})
		</script>
	</body>
</html>